<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <style>
    .title{
      width: 1200px;
      height: 200px;
      margin: 0 auto;
      background-image: url(../static/images/5.jpg);
      background-size:100%;
    }
    .title-left{
      display:inline-block;
      float: left;
      padding-left: 100px;
      padding-top: 100px;
      font-size: 30px;
      color:orange
    }
    .title-right{
      display:inline-block;
      float: right;
      padding-top: 50px;
      padding-right: 100px;
    }
    .title-box{
      width: 150px;
      height: 100px;
      background-color: white;
      margin-top: 10px;
      font-size: 40px;
      text-align: center;
      line-height: 100px;
      color: red;
    }
    .title-font{
      width: 150px;
      height: 30px;
      background-color: white;
      font-size: 6px;
      text-align: center;
    }
    .main-body{
      width: 1200px;
      height: 200px;
      margin: 0 auto;
    }
    .body-left{
      width: 150px;
      height: auto;
      display:inline-block;
      float: left;
    }
    .body-right{
      width: 1000px;
      height: 600px;
      display:inline-block;
      float: right;
    }
    .table-line{
      height: 50px;
      margin: 0px;
      padding-top: 30px;
      text-align: center;
      border-bottom: solid rgba(0, 0, 0, .3);
    }
    a{
      color: black;
    }
    a:hover{
      color: #d58512;
    }
    .form-box{
      width: 300px;
      height: 300px;
      margin: 50px auto;
    }
    input{
      width: 200px;
      height: 30px;
    }
    .menu
    {
      padding: 0;
      height: 50px;
      position: relative;
    }
    .menubar
    {
      margin: 0 auto;
      position: absolute;
      list-style-type: none;
      width: 100%;
      overflow-y: auto;
    }

    .menubar li
    {
      display:inline-block;
      cursor: pointer;
      line-height: 50px;
      padding-right: 40px;
    }
    .menubar li:hover
    {
      color:#d58512;
    }
    .menubar span
    {
      display: block;
      height: 50px;
      font-size: 15px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="title">
    <div>
      <div class="title-left">{{ uname }} <span>&nbsp;&nbsp;<a href="#" style="text-decoration: none;font-size: 15px">修改</a></span></div>
      <div class="title-right">
        <div class="title-font">关注的房源</div>
        {% if  tenant.house %}
          <div class="title-box">1</div>
        {% else %}
          <div class="title-box">0</div>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="main-body">
    <div class="body-left">
      <p class="table-line"><a href="/" style="text-decoration: none;">首页</a></p>
      <p class="table-line"><a href="/contract" style="text-decoration: none;">合同查询</a></p>
      <p class="table-line"><a href="/followhouse" style="text-decoration: none;">关注的房源</a></p>
      <p class="table-line" style="background-color: #fbb100"><a href="/person" style="text-decoration: none;">设置</a></p>
    </div>
    <div class="body-right">
      <p style="font-size: 23px">设置</p>
      <hr>
      <div class="menu">
        <ul class="menubar">
          <li><span id="a1">修改名称</span></li>
          <li> <span id="a2">修改密码</span></li>
          <li><span id="a3">修改手机号</span></li>
        </ul>
      </div>
      <hr>
      <div class="form-box" id="active1">
        <form action="change_name" method="get">
          <p>新昵称: &nbsp;&nbsp;<input type="text" placeholder="请输入新的昵称" name="newName"></p>
          <p style="padding-left: 60px"><button type="submit" style="width: 200px; height:50px; background-color: #fbb100">提交</button></p>
        </form>
      </div>
      <div class="form-box" id="active2" style="display: none">
        <form action="change_pwd" method="get">
          <p>旧密码: &nbsp;<input type="text" name="oldPwd" id="oldPwd"></p>
          <p>新密码:&nbsp;&nbsp;<input type="text" name="newPwd" id="newPwd"></p>
          <p style="padding-left: 60px"><button type="submit" style="width: 200px; height:50px; background-color: #fbb100" id="pwdBtn" onclick="return changePwd();">提交</button></p>
        </form>
      </div>
      <div class="form-box" id="active3" style="display: none">
        <form action="change_phone" method="get">
          <p>手机号码: &nbsp;&nbsp;<input type="text" placeholder="请输入新的手机号" name="newPhone" maxlength="11"></p>
          <p style="padding-left: 80px"><button type="submit" style="width: 200px; height:50px; background-color: #fbb100">提交</button></p>
        </form>
      </div>
    </div>
  </div>

</body>
</html>

<script>
  document.getElementById('a1').onclick= function () {
    document.getElementById('active1').style.display = '';
    document.getElementById('a1').style.color = '#fbb100';
    document.getElementById('a2').style.color = '';
    document.getElementById('a3').style.color = '';
    document.getElementById('active2').style.display = 'none';
    document.getElementById('active3').style.display = 'none';

  };
  document.getElementById('a2').onclick=function () {
    document.getElementById('active1').style.display = 'none';
    document.getElementById('active2').style.display = '';
    document.getElementById('a2').style.color = '#fbb100';
    document.getElementById('a1').style.color = '';
    document.getElementById('a3').style.color = '';
    document.getElementById('active3').style.display = 'none';
  };
  document.getElementById('a3').onclick= function () {
    document.getElementById('active1').style.display = 'none';
    document.getElementById('active2').style.display = 'none';
    document.getElementById('active3').style.display = '';
    document.getElementById('a3').style.color = '#fbb100';
    document.getElementById('a1').style.color = '';
    document.getElementById('a2').style.color = '';
  };
  function changePwd(){
    var old = document.getElementById('oldPwd').value;
    var newPwd = document.getElementById('newPwd').value;
    if(!old){
      alert("请输入旧密码");
      return false
    }
    else if(!newPwd){
      alert("请输入新密码");
      return false
    }
  }
</script>




